<template>
    <uni-popup ref="industryBrand" type="bottom">
        <div class="type_pick">
            <div class="title flex">
                <span @click="clearAll" class="w100 flex-center">清空</span>
                <p class="flex-1 flex-center">搜索行业/品牌</p>
                <span @click="confirmMulPick" class="w100 flex-center" style="color: #002a4f">{{ multiple ? '确定' : '' }}</span>
            </div>
            <div class="list">
                <template v-if="multiple">
                    <div class="sub_title">已选品牌</div>
                    <div class="sub_list">
                        <div class="sub_item" v-for="(item, index) in mySubList" :key="index" @click="editSub(item, 'del', index)">
                            <p>{{item.industryName}}</p>
                            <i v-if="item.id && item.id != 'video'" class="icon-minus-circular"></i>
                        </div>
                    </div>
                </template>
                <div class="sub_title">热门品牌</div>
                <div class="sub_list">
                    <div class="sub_item" 
                        @click="editSub(item, 'add')" 
                        v-for="(item, index) in allSubList" :key="index">
                        <p>{{item.industryName}}</p>
                        <i v-if="multiple" class="icon-plus-circular"></i>
                    </div>
                </div>
            </div>
        </div>
    </uni-popup>
</template>

<script>
import { getDynamicIndustrys } from '@/request/art'
export default {
    data() {
        return{
            promiseResolve: null,
            mySubList: [],
            dynamicIndustys: []
        }
    },
    props: {
        multiple: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        allSubList() {
            let allSubList =  this.dynamicIndustys.filter(item => !this.mySubList.some(i => i.id == item.id))
            if(this.keyword) {
                allSubList = allSubList.filter(i => i.industryName.indexOf(this.keyword) > -1)
            }
            return allSubList
        },
    },
    methods: {
        open(options = {}) {
            return new Promise((resolve, reject) => {
                this.promiseResolve = resolve
                this.$refs.industryBrand.open()
                if(options.selected) {
                    this.mySubList = options.selected
                }
                this.getList()
            })
        },
        editSub(item, type, index) {
            if(this.multiple) {
                if(type == 'del' && item.id && item.id != 'video') {
                    this.mySubList.splice(index, 1)
                } else if(type == 'add') {
                    this.mySubList.push(item)
                }
            } else {
                this.promiseResolve(item)
                this.$refs.industryBrand.close()
            }
        },
        getList() {
            getDynamicIndustrys().then(res => {
                this.dynamicIndustys = res.data.dynamicIndustys
            })
        },
        clearAll(){
            this.promiseResolve()
            this.$refs.industryBrand.close()
        },
        confirmMulPick() {
            this.promiseResolve(this.mySubList)
            this.$refs.industryBrand.close()
        }
    }

}
</script>

<style lang="less" scoped>
.type_pick{
    width: 100%;
    border-radius: 20rpx 20rpx 0 0;
    background: #fff;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    .title{
        flex-shrink: 0;
        width: 100%;
        height: 90rpx;
        border-bottom: 1px solid #ddd;
        span{
            color: #999;
        }
        p{
            font-weight: bold;
        }
    }

    .list{
        overflow: auto;
    }
    .sub_title{
        width: 100%;
        padding: 20rpx 25rpx;
        font-size: 34rpx;
        font-weight: bold;
        background: #fff;
        color: #333;
    }
    .sub_list{
        background: #fff;
        padding: 25rpx 0 25rpx 25rpx;
        display: flex;
        flex-wrap: wrap;
        .sub_item{
            width: 225rpx;
            height: 90rpx;
            background: #f2f2f2;
            border-radius: 10rpx;
            margin-right: 15rpx;
            margin-bottom: 15rpx;
            padding: 0 15rpx;
            .align(v-center);
            p{
                flex: 1;
                font-size: 30rpx;
                color: #555;
            }
            i{
                font-size: 24rpx;
            }
            &:nth-child(3n) {
                margin-right: 0;
            }
        }
    }
}
</style>